<template>
    <div class="bottomBtn">
        <div class="hide button" @click="changeisshowChild">
            {{
                thinglist
                    ? isshowdone
                        ? '隐藏已完成事项'
                        : '展开已完成事项'
                    : '没有已经完成的事项'
            }}
        </div>
        <div class="clear button-bule" @click="clearChild">清空事项</div>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['thinglist'],
    data() {
        return {
            isshowdone: 0,
        }
    },
    watch: {},
    computed: {},
    methods: {
        changeisshowChild() {
            this.$emit('changeisshowChild', !this.isshowdone)
            this.isshowdone = !this.isshowdone
        },
        clearChild() {
            this.$emit('clearChild', 1)
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="less" scoped>
.bottomBtn {
    display: flex;
    max-width: 300px;
    margin: 10px auto 10px;
    justify-content: space-between;
}
.hide,
.clear {
    padding: 8px;
    transition: all, 1s;
    color: #fff;
    background-color: #dddddd;
    border-radius: 4px;
    border: 0;
}

.hide:hover,
.clear:hover {
    background-color: #06f;
}
</style>
